<template>
  <!-- 最外层容器 -->
  <el-container class="home-box">
    <!-- 1.顶栏容器-头部 -->
    <el-header>
      <div>
        <img src="../assets/heima.png" alt="" />
        <span>电商后台管理系统</span>
      </div>
      <el-button type="info" @click="logout"> 退出 </el-button>
    </el-header>
    <!-- 2.内容区域 -->
    <el-container>
      <!-- 2-1. 左边侧边栏容器  4-:unique-opened='true'是否只保持一个子菜单的展开-->
      <!-- (3) 左菜单栏是否随着点击切换按钮折叠、展开-:width="isCollapse ? '64px':'200px'" -->
      <el-aside :width="isCollapse ? '64px' : '200px'">
        <!-- 5-点击按钮，切换菜单栏的折叠与展开-:collapse='isCollapse' 
        （2）关闭折叠动画-:collapse-transition='false'   
        7-1/3 动态保存当前点击的激活链接的状态 :default-active= 'activePath'-->
        <div class="toggle-button" @click="toggleCollapse">|||</div>
        <el-menu
          background-color="#333741"
          text-color="#fff"
          active-text-color="#409EFF"
          :unique-opened="true"
          :collapse="isCollapse"
          :collapse-transition="false"
          :router="true"
          :default-active="activePath"
        >
          <!-- 1级菜单 2-index="1"中的id是字符串型，变成动态获取绑定id属性，来解决同时打开相同id的项目-->
          <el-submenu
            :index="item.id + ''"
            v-for="item in menusList"
            :key="item.id"
          >
            <!--1级菜单模板区域  -->
            <template slot="title">
              <!-- 3-图标 动态根据id渲染自己的图标 iconsObj['125'],'125'= item.id -->
              <i :class="iconsObj[item.id]"></i>
              <!-- 文本 -->
              <span>{{ item.authName }}</span>
            </template>

            <!-- 2级菜单  方法1：点击； 方法2：监听路由地址变化-->
            <!-- <el-menu-item
              :index="'/' + subItem.path"
              v-for="subItem in item.children"
              :key="subItem.id"
              @click="saveNavState('/' + subItem.path)"
            > -->
              <el-menu-item
              :index="'/' + subItem.path"
              v-for="subItem in item.children"
              :key="subItem.id"
            >
              <!--2级菜单模板区域  -->
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>{{ subItem.authName }}</span>
              </template>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <!-- 2-2.中间右边主要区域容器 -->
      <el-main>
        <!-- 子 路由占位符 -->
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
  <!--  重点；双层for循环嵌套
1-通过 v-for 双层循环分别进行一级菜单和二级菜单的渲染

2-index="1"中的id是字符串型，变成动态获取绑定id属性，来解决同时打开相同id的项目

3-动态根据id渲染自己的图标,一级菜单的图标

4.每次只展开1个菜单项：:unique-opened='true' ，是否只保持一个子菜单的展开	boolean	—false/true

5-点击按钮，切换菜单栏的折叠与展开：
(1):collapse='isCollapse',是否水平折叠收起菜单（仅在 mode 为 vertical 时可用）boolean	—false/true
(2)关闭折叠展开动画：:collapse-transition="false"，是否开启折叠动画	boolean	—true
(3)点击按钮，根据切换菜单栏的折叠与展开,来改变el-menu侧边菜单栏的宽度：width='动态赋值64、200'===折叠与展开===:width='isCollapse'?'64px':'200px'

6-通过路由相关属性启用菜单的路由功能
:router='true',是否使用 vue-router 的模式，启用该模式会在激活导航时以 :index=''/'+subItem.path' 作为 path 进行路由跳转,boolean	—false/true

7.动态点击选中某个二级菜单项时，该链接高亮显示： ：default-active='activeIndex'	当前激活菜单的 index	string
(1)为二级菜单注册点击事件
(2)每次点击链接时，把对应的地址先保存到sessioStorage中，这样就已经把需要激活的链接保存起来了
(3)在data数据中添加 activePath:''
(4)当我们刷新页面时，create创建完home组件，就可以从sessionStroage中把那个值取出来，动态的赋值给el-menu的 :default-active= 'activePath'属性
(5)//为data中的ap重新赋值    -->
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      //把获取到的左侧菜单数据挂载到自己的私有数据上
      menusList: [],
      iconsObj: {
        //每个id项前的图标 iconsObj[item.id]
        125: "iconfont icon-user",
        103: "iconfont icon-tijikongjian",
        101: "iconfont icon-shangpin",
        102: "iconfont icon-danju",
        145: "iconfont icon-baobiao",
      },
      //菜单栏是否折叠、展开
      isCollapse: false,

      //7-3 被激活的链接地址，动态绑定到el-menu的 :default-active= 'activePath' 上，点击的链接，使之高亮
      activePath: "", //记录高亮导航的路由地址
    };
  },
  //2-生命周期：created--在初始化vue实例上的属性和方法之后 执行； created: function ()
  created() {
    // 2-1 一打开页面，立即获取所有的左侧菜单
    this.getMenuList();

    //7-4 方法1：home组件已被创建，获取保存的点击的链接
    // this.activePath = window.sessionStorage.getItem("activePaths");

    //方法2：②组件加载时，获取当前的路由地址-- ①监听路由地址变化 --③建立对应的组件，来跳转
    this.activePath = location.hash.slice(1)
  },
  watch: {
    //方法2：①监听路由地址变化
    $route(to, from) {
      this.activePath = to.path;
      console.log(to.path);
    },
  },

  methods: {
    //1-点击按钮，退出登录，清空token，强制跳转回登录页
    logout: function () {
      //(1)清空token
      window.sessionStorage.clear();
      //(2)编程式导航，强制跳转回登录页
      this.$router.push("/login");
    },
    //2-1 获取所有的左侧菜单数据  getMenuList : async function(){}
    async getMenuList() {
      const ret = await this.$http.get("menus");
      //   console.log(ret);
      const res = ret.data;
      //判断是否获取成功
      if (res.meta.status !== 200) {
        return this.$message.error("获取菜单数据失败：" + res.meta.msg);
      }
      //获取菜单成功
      //   console.log(res);
      this.$message.success("获取菜单数据成功");
      this.menusList = res.data;
      console.log(this.menusList);
    },
    //5-点击按钮，切换菜单栏的折叠与展开：
    toggleCollapse: function () {
      this.isCollapse = !this.isCollapse;
    },

    //7-2 方法1：保存当前点击链接的激活状态 saveNavState
    // saveNavState: function (activePath) {
    //   this.activePath = activePath; //为data中的ap重新赋值=(形参)
    //   window.sessionStorage.setItem("activePaths", activePath);
    // },
  },
  /*     
1-退出功能实现原理
基于 token 的方式实现退出比较简单，只需要销毁本地的 token 即可。这样，后续的请求就不会携带
token ，必须重新登录生成一个新的 token 之后才可以访问页面。
    */
};
</script>

<style lang="less" scoped>
.home-box {
  height: 100%;
}
.el-header {
  background-color: #373d41;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  padding-left: 0;
  padding-right: 0;
  div {
    display: flex;
    align-items: center;
    span {
      margin-left: 20px;
    }
  }
}
.el-aside {
  background-color: #333744;
  .el-menu {
    border-right: none;
  }
  .toggle-button {
    background-color: #4a5064;
    color: #fff;
    text-align: center;
    font-size: 10px;
    line-height: 24px;
    letter-spacing: 0.2em;
    cursor: pointer;
  }
}
.el-main {
  background-color: rgb(217, 240, 243);
}
.iconfont {
  margin-right: 10px;
}
</style>